<template>
  <div class="qrcode-container">
    <h1>二维码签到</h1>
    <div v-if="qrCodeUrl">
      <img :src="qrCodeUrl" alt="QR Code" />
      <p>请扫描二维码完成签到</p>
    </div>
    <div v-else>
      <p>二维码生成中...</p>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import QRCode from 'qrcode'

export default {
  setup() {
    const qrCodeUrl = ref('')

    onMounted(async () => {
      try {
        // 调用后端接口获取最新的二维码会话
        const response = await axios.get('http://localhost:8080/attendance/latestQRCodeSession')

        if (response.data.code === 200) {
          const latestSession = response.data.data  // 获取最新二维码会话

          // 生成二维码内容，可以包含会话的全部信息
          const qrCodeContent = JSON.stringify(latestSession)  // 生成二维码内容，包含 sessionId 和其他信息

          // 使用二维码库生成二维码
          qrCodeUrl.value = await QRCode.toDataURL(qrCodeContent, {
            width: 300,
            height: 300
          })
        } else {
          console.error('未找到二维码会话');
        }
      } catch (error) {
        console.error('生成二维码时出错:', error)
      }
    })

    return {
      qrCodeUrl
    }
  }
}
</script>

<style scoped>
.qrcode-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
}

.qrcode-container img {
  max-width: 300px;
  max-height: 300px;
}
</style>
